<template>
	<view class="container">
		<!--排序.开始-->
		<view class="sort-bar">
			<view class="sort-box">
				<view class="item-box" :class="{active:filterIndex===0}" @click="tabClick(0)">综合排序</view>
				<view class="item-box" :class="{active:filterIndex===1}" @click="tabClick(1)">销量优先</view>
				<view class="item-box" :class="{active:filterIndex===2}" @click="tabClick(2)">
					<text>价格</text>
					<text class="arrow iconfont icon-sort"></text>
				</view>
				<view class="item-box menu iconfont icon-more icon-more" @click="toggleMenu('show')"></view>
			</view>
		</view>
		<!--排序.结束-->
		
		<!--列表.开始-->
		<view class="group-box">
			<view class="goods-list">
				<!--循环.开始-->
				<navigator 
					v-for="(item,index) in goodsList" 
					:key="index" 
					:url="'show?id='+item.id"
					class="list-box">
					<view class="img-box">
						<image mode="widthFix" :src="$api.loadFile(item.imgUrl)"></image>
					</view>
					<view class="txt-box">
						<text class="title">{{item.title}}</text>
						<view class="price">
							<text class="sell">{{item.sellPrice}}</text>
							<text class="original">{{item.marketPrice}}</text>
						</view>
					</view>
				</navigator>
				<!--循环.结束-->
			</view>
			<uni-load-more :status="loadingType" @clickLoadMore="loadData('add')"></uni-load-more>
		</view>
		<!--列表.结束-->
		
		<!--菜单窗体.开始-->
		<dt-drawer ref="drawerMenu">
			<view class="group-box">
				<view class="ntitle">
					<view class="left">
						<text class="h3">筛选标签</text>
					</view>
					<view v-if="labelId>0" class="right">
						<text @click="changeLabel(0)">取消</text>
					</view>
				</view>
				<view class="cate-item-list">
					<view v-for="(item,index) in labelList" :key="index" class="list-box">
						<text 
							:class="{active:item.id===labelId}"
							@click="changeLabel(item.id)">
							{{item.title}}
						</text>
					</view>
				</view>
				<view class="ntitle">
					<view class="left">
						<text class="h3">价格范围</text>
					</view>
				</view>
				<view class="cate-item-list">
					<view class="price-box">
						<input type="number" v-model="minPrice" />
					</view>
					<view class="line">-</view>
					<view class="price-box">
						<input type="number" v-model="maxPrice" />
					</view>
				</view>
				
				<block v-for="(citem,cindex) in categoryList" :key="cindex">
					<view class="ntitle">
						<view class="left">
							<text class="h3">{{citem.title}}</text>
						</view>
					</view>
					<view class="cate-item-list">
						<view v-for="(sitem,sindex) in citem.children" :key="sindex" class="list-box">
							<text 
								:class="{active:sitem.id===categoryId}" 
								@click="changeCategory(sitem.id)">
								{{sitem.title}}
							</text>
						</view>
					</view>
				</block>
				
			</view>
			<!--按钮.开始-->
			<view class="cate-btn-wrap">
				<view class="btn-box">
					<button @click="toggleMenu()">取消</button>
					<button @click="changeConfirm" type="primary">确定</button>
				</view>
			</view>
			<!--按钮.结束-->
		</dt-drawer>
		<!--菜单窗体.结束-->
		
	</view>
</template>

<script>
	import dtDrawer from "@/components/dt-drawer/dt-drawer.vue";
	export default {
		components: {
			dtDrawer
		},
		data() {
			return {
				filterIndex: 0, //Tab索引
				priceOrder: 0, //1价格从低到高 2价格从高到低
				merchantId: 0, //商家ID
				labelId: 0, //标签ID
				categoryId: 0, //分类ID
				keyword: null, //搜索关健字
				minPrice: '', //最低价格
				maxPrice: '', //最高价格
				loadingType: "more", //加载状态
				totalCount: 0, //总数量
				totalPages: 0, //总页数
				pageSize: 10, //每页显示条数
				pageIndex: 1, //当前页码
				labelList: [], //标签列表
				categoryList: [], //分类列表
				goodsList: [] //数据列表
			};
		},
		methods: {
			//点击左侧菜单
			toggleMenu(type){
				this.$refs.drawerMenu.toggle(type);
			},
			//点击确认按钮
			changeConfirm(){
				let _this=this;
				if(_this.minPrice>0 && _this.maxPrice>0){
					_this.toggleMenu(); //隐藏左侧菜单
					this.loadData('refresh', 1);
					uni.showLoading({
						title: '正在加载'
					})
				}
			},
			//点击标签按钮
			changeLabel(id){
				let _this=this;
				_this.labelId=id;
				_this.toggleMenu(); //隐藏左侧菜单
				this.loadData('refresh', 1);
				uni.showLoading({
					title: '正在加载'
				})
			},
			//点击分类按钮
			changeCategory(id){
				let _this=this;
				_this.categoryId=id;
				_this.toggleMenu(); //隐藏左侧菜单
				this.loadData('refresh', 1);
				uni.showLoading({
					title: '正在加载'
				})
			},
			//点击筛选按钮
			tabClick(index){
				if(this.filterIndex === index && index !== 2){
					return;
				}
				this.filterIndex = index;
				//价格筛选
				if(index === 2){
					this.priceOrder = this.priceOrder === 1 ? 2: 1;
				}else{
					this.priceOrder = 0;
				}
				//页面回到顶部
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})
				//重新加载
				this.loadData('refresh', 1);
				uni.showLoading({
					title: '正在加载'
				})
			},
			//加载分类
			async initData() {
				let _this = this;
				//console.log(_this.categoryId)
				//加载分类
				let resCategory = await _this.$api.request({
					url: `/client/shop/category`,
					method: "get",
				});
				_this.categoryList = resCategory.data;
				//加载标签
				let resLabel = await _this.$api.request({
					url: `/client/shop/label/view/0`,
					method: "get",
				});
				_this.labelList = resLabel.data;
				//加载商品
				this.loadData('add');
			},
			//加载列表,带下滑刷新和上滑加载
			async loadData(type='add', loading) {
				let _this = this;
				//上滑加载更多
				if(type === 'add'){
					if(_this.loadingType === 'nomore'){
						return;
					}
					_this.loadingType = 'loading';
				}
				//下滑刷新
				else{
					_this.pageIndex=1;
					_this.goodsList=[];
					_this.loadingType="more";
				}
				
				//请求API数据
				let sendUrl = `/client/shop/goods?status=0&pageSize=${_this.pageSize}&pageIndex=${_this.pageIndex}`;
				if(_this.keyword){
					sendUrl+=`&keyword=${_this.keyword}`
				}
				if(_this.labelId){
					sendUrl+=`&labelId=${_this.labelId}`
				}
				if(_this.merchantId){
					sendUrl+=`&merchantId=${_this.merchantId}`
				}
				if(_this.categoryId){
					sendUrl+=`&categoryId=${_this.categoryId}`
				}
				if(_this.minPrice>0){
					sendUrl+=`&minPrice=${_this.minPrice}`
				}
				if(_this.maxPrice>0){
					sendUrl+=`&maxPrice=${_this.maxPrice}`
				}
				
				//筛选条件
				if(_this.filterIndex === 1){
					sendUrl+=`&orderBy=-SaleCount`
				}
				if(_this.filterIndex === 2){
					if(_this.priceOrder == 1){
						sendUrl+=`&orderBy=SellPrice`
					}else{
						sendUrl+=`&orderBy=-SellPrice`
					}
				}
				
				//请求API数据
				let resGoods = await _this.$api.request({
					url: sendUrl,
					method: "GET",
				}).catch((err)=>{
					_this.loadingType="nomore";
					uni.stopPullDownRefresh();
					//console.log("加载出错：", err);
				})
				if(resGoods){
					let pageInfo = JSON.parse(resGoods.header["x-pagination"]);
					_this.totalCount = pageInfo.totalCount;
					_this.totalPages = pageInfo.totalPages;
					_this.goodsList = _this.goodsList.concat(resGoods.data);
				}
				
				//判断是否还有下一页
				if(_this.pageIndex >= _this.totalPages){
					_this.loadingType="nomore";
				}else{
					_this.pageIndex++;
					_this.loadingType="more";
				}
				//下滑隐藏动画及上滑事件
				if(type === 'refresh'){
					if(loading == 1){
						uni.hideLoading()
					}else{
						uni.stopPullDownRefresh();
					}
				}
				
			},
		},
		//页面初始化
		onLoad(options){
			//搜索关健字
			if(options.q){
				this.keyword = options.q;
			}
			//商家ID
			if(!isNaN(options.mid)){
				//传的是字符串，需要转换一下
				this.merchantId = parseInt(options.mid);
			}
			//分类ID
			if(!isNaN(options.cid)){
				//传的是字符串，需要转换一下
				this.categoryId = parseInt(options.cid);
			}
			this.initData();
		},
		//下滑刷新
		onPullDownRefresh(){
			this.loadData('refresh');
		},
		//上滑加载更多
		onReachBottom(){
			this.loadData('add');
		},
	}
</script>

<style lang="scss">
.sort-bar{
	height: 40px;
	.sort-box{
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		height: 40px;
		background: #fff;
		box-shadow: 0 0 2px rgba($color: #000, $alpha: 0.05);
		background: linear-gradient(to bottom, #fff , #fafafa);
		z-index: 1;
		.item-box{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-grow: 1;
			position: relative;
			color: #333;
			font-size: 14px;
			font-weight: bold;
			&.active{
				color: #fa436a;
				&::after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120rpx;
					height: 0;
					border-bottom: 2px solid #fa436a;
				}
			}
			.arrow{
				color: #999;
				font-size: 15px;
				font-weight: normal;
			}
			&.menu{
				flex-grow: 0;
				width: 40px;
				&::after{
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					border-left: 1px solid #ddd;
					width: 0;
					height: 17px;
				}
			}
		}
	}
}
</style>